<template>
	<div class="main_content_1">
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<div class="block">
				开始时间：
				<el-date-picker v-model="startTime" type="datetime" placeholder="选择日期时间" style="width: 100%;margin-top: 0.625rem;" :picker-options="pickerOptions0"
				 value-format="yyyy-MM-dd HH:mm:ss" align="right">
				</el-date-picker>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateExamByCourseId()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
			<div class="block">
				结束时间：
				<el-date-picker v-model="closeTime" type="datetime" placeholder="选择日期时间" style="width: 100%;margin-top: 0.625rem;" :picker-options="pickerOptions0"
				 value-format="yyyy-MM-dd HH:mm:ss" align="right">
				</el-date-picker>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="updateExamByCourse(closeTime)">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 顶部按钮 -->
		<div class="btn_group">
			<div class="header1">
				<div>
					<el-dropdown>
						<button>
							<i class="el-icon-plus"></i>新建作业
						</button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="newjob">手动创建</el-dropdown-item>
							<el-dropdown-item @click.native="database">资料库创建</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

					<button @click="$router.push('/JobLibrary')">作业库</button>
				</div>
				<!-- <el-input v-model="search" placeholder="请输入内容" suffix-icon="fa fa-search"></el-input> -->
			</div>
			<!-- 搜索框 -->
			<div class="dataSearch">
				<!-- 输入框 -->
				<input type="text" class="ipt_val" placeholder="搜索" v-model="formData.search" />
				<!-- 放大镜 -->
				<input type="button" class="ipt_fdj" @click="getFiles" />
				<!-- 搜索按钮 -->
				<button type="button" class="ipt_search" @click="getFiles">搜索</button>
			</div>
		</div>
		<div class="operation">

			<div class="middle">
				<el-select v-model="value" placeholder="请选择" @change="getTaskByCourseAndClazz(currentPage)">
					<el-option v-for="item in options" :key="item.id" :label="item.className" :value="item.id">
					</el-option>
				</el-select>
				状态
				 <el-radio-group v-model="radio">
					<el-radio  label="3" @change="getTaskByCourseAndClazz(1)">全部</el-radio>
					<el-radio  label="0" @change="getTaskByCourseAndClazz(1)">未开始</el-radio>
					<el-radio  label="1" @change="getTaskByCourseAndClazz(1)">进行中</el-radio>
					<el-radio  label="2" @change="getTaskByCourseAndClazz(1)">已结束</el-radio>
				</el-radio-group>
			</div>
			<div class="body">
				<el-row :gutter="20">
					<el-col :span="6" v-for="(Item,index) in TaskByCourseList" :key="Item.id">

						<div class="grid-content">

							<div class="grid-content_1">

								<div style="display: flex;justify-content: space-between;"><span>{{Item.taskName}}</span><i class="el-icon-delete"
									 style="font-size: 20px;" @click="deleteTaskByClazzIdTaskId(Item.id)"></i></div>
								<div>开始时间:{{Item.startTime}}<i class="el-icon-edit" @click="change(Item.id,index)" v-if="Item.taskStatus==0"></i></div>
								<div>结束时间:{{Item.closeTime}}<i class="el-icon-edit" @click="change1(Item.id,index)" v-if="Item.taskStatus==1||Item.taskStatus==0"></i></div>
								<div>提交数:{{Item.submissionsNum}}/{{Item.clazzPeoNum}}</div>
								<div style="display: flex;justify-content: flex-end;">
                                 <el-button style="background-color:#ffab03;color: white;" round size="small" @click="$router.push({'name':'Viewjob',params:{testid:Item}})" v-if="Item.taskStatus==1||Item.taskStatus==2">查看</el-button>
									<el-button style="background-color:#ffab03;color: white;" round size="small"  @click="fabu(Item.id)"  v-if="Item.taskStatus==0">重设发放</el-button>
								    <el-button  round size="small"  @click="$router.push({'name':'Viewjob',params:{testid:Item}})"  style="background-color:#03D3BD;color: white;"  v-if="Item.taskStatus==0">查看</el-button>
									<el-button  round size="small"  @click="correcting(Item.id,Item.taskName)" style="background-color:#03D3BD;color: white;"  v-if="Item.taskStatus==2||Item.taskStatus==1">批阅</el-button>

								</div>
							</div>
						</div>
					</el-col>

				</el-row>
                <el-row style="margin-top: 1.25rem;">
						<el-pagination background layout="prev, pager, next" :total="1000" :current-page="currentPage"
				@current-change="currentChange" style="margin-top: 1.25rem;">
				</el-pagination>
				</el-row>

			</div>
		</div>
	</div>

</template>

<script>
	import {
		HttpManager
	} from "../../../request/Teacher.js"
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				radio: "3",
				search: "",
				list: [{
					title: "新建作业",
					numberPeople: 52,
					time: "07-28 17:00",
					isshow: false,
				}],
				options: [],
				value: '全部班级',
				dialogVisible: false,
				dialogVisible1:false,
				startTime: '',
				closeTime: '',
				lastEntryTime: '',
				earliestSubmitTime: '',
				value1: '',
				courseID: window.localStorage.getItem("ClassId"),
				TaskByCourseList: [],
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					}
				},
				currentPage:1
			}
		},
		created() {
			this.getClazzByCourseId();
		},
		methods: {
			handleClose()
			{
				this.dialogVisible= false;
				this.dialogVisible1= false;
			},
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			//路由跳转
			correcting(id,taskName) {
				this.$router.push({path:'/correcting',query:{'id':id,'taskName':taskName}});
			},
			newjob() {
				this.$router.push('/Newjob');
			},
			database() {
				this.$router.push('/database');
			},
			Workcorrecting() {
				this.$router.push('/Workcorrecting');
			},


			fabu(id) {
				localStorage.setItem("TestId", id);
				this.$router.push('/Releasejob');
				
			}
			,


			//老师根据课程获取任务
			getTaskByCourseAndClazz(id) {
				this.currentPage=id;
				var params = {
					courseId: this.courseID,
					clazzId: this.value,
					examStatus: this.radio,
					pageNum: this.currentPage-1
				}
				HttpManager.getTaskByCourseAndClazz(params).then(e => {
					console.log(e);
					this.TaskByCourseList = e.data.data;
				})
			},
			//删除任务
			deleteTaskByClazzIdTaskId(id) {
				var parmas = {
					taskIds: [id]
				}
				HttpManager.deleteTask().then(e => {
					console.log(e);
				})
			},
			//获取班级列表
			getClazzByCourseId() {
				var parmas = {
					courseId: this.courseID
				}
				HttpManager.getClazzByCourseId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.options = e.data.data;
					this.value = this.options[0].id;
					this.getTaskByCourseAndClazz(1);
				})

			},
			deleteTaskByClazzIdTaskId(id)
			{
				var parmas = {
					clazzId:this.value,
					taskId: id
				}
				HttpManager.deleteTaskByClazzIdTaskId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.getTaskByCourseAndClazz();
				})
			},
			change(id,index) {
				this.dialogVisible = true;
				this.testId =id;
				this.startTime=this.TaskByCourseList[index].startTime;
				this.closeTime=this.TaskByCourseList[index].closeTime;
				this.beforeEndTime=this.TaskByCourseList[index].startTime;
				
			},
			change1(id,index)
			{
				this.dialogVisible1 = true;
				this.testId = id;
				this.startTime=this.TaskByCourseList[index].startTime;
				this.closeTime=this.TaskByCourseList[index].closeTime;
				this.beforeEndTime=this.TaskByCourseList[index].startTime;
			
			},
			//更新时间
			updateExamByCourseId(id) {
				this.dialogVisible = false;
				var parmas = {
					closeTime: this.closeTime,
					// earliestSubmitTime: this.earliestSubmitTime,
					beforeEndTime: this.beforeEndTime,
					startTime: this.startTime,
					taskId: this.testId
				}
				HttpManager.updateTaskByCourseId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
				})
			},
			//更新时间
			updateExamByCourse(id) {
				this.dialogVisible = false;
				var parmas = {
					closeTime: this.closeTime,
					beforeEndTime: this.beforeEndTime,
					startTime: this.startTime,
					taskId: this.testId
				}
				HttpManager.updateTaskByCourseId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
				})
			},
			currentChange(id)
			{
			   this.currentPage=id;
               this.getTaskByCourseAndClazz(id);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.el-icon-edit{
		margin-left: 1.25rem;
		font-size: 1.25rem;
		color: #c7c7c7;
	}
	.el-icon-edit :hover{
		color: #03D3BD;
		
	}

	.main_content_1 {
		margin-left: 20px;
		margin-right: 1.25rem;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;
		margin-right: 1.25rem;

		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #ffffff;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #03d3bd;
				}

				&:focus {
					border-color: #03d3bd;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #ffffff;
				}
			}
		}
	}

	.el-row {
		margin-top: 1.25rem;
	}

	.operation {
		width: 100%;
		height: 100%;
		margin-top: 2.875rem;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	// .header1 {
	// 	width: 100%;
	// 	height: 100px;
	// 	display: flex;
	// 	align-items: center;
	// 	position: relative;
	// 	border-bottom: 1px solid #f2f6fc;
	// }

	.header1 button {
		height: 40px;
		width: 100px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		margin-left: 20px;
		cursor: pointer;
	}

	.header1 button i {
		margin-right: 5px;
		font-weight: bold;
	}

	.header1 .el-input {
		position: absolute;
		right: 0;
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}

	.middle {
		/* border: 1px solid; */
		height: 40px;
		padding-left: 30px;
	}

	.middle .el-input {
		width: 200px;
	}

	.body {
		flex: 1;
		padding: 0 30px;
		// margin-top: 1.875rem;
	}

	.body li {
		list-style: none;
		display: block;
		height: 80px;
		display: flex;
		border-radius: 10px;
	}

	.body li:hover {
		background-color: #f7fafc;
	}

	.body li div {
		flex: 1;
		display: flex;
	}

	.body .left {
		flex-direction: column;
		justify-content: center;
	}

	.body .left p {
		color: #abbde2;
	}

	.body .right {
		align-items: center;
	}

	.body .right .show {
		display: flex;
		justify-content: center;
	}

	.body .right .show span {
		color: #616eff;
		margin: 10px;
	}

	.body .right button {
		height: 40px;
		width: 60px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		margin-left: 30px;
		cursor: pointer;
	}

	.body .right span {
		display: flex;
		align-items: flex-end;
	}

	.body .right span p {
		font-size: 10px;
	}

	.grid-content {
		height: 17.25rem;
		width: 100%;

		background-color: #efefef;
	}

	.grid-content_1 {
		box-sizing: border-box;
		margin: 1rem;
		overflow: hidden;
	}


	.grid-content_1>div {
		margin-top: 1.6rem;
	}

	// .el-button{
	// 	margin-left: 1.5rem;
	// }
</style>
